<template>
  <a-modal
    width="60%"
    :visible="showModal"
    title="新增流程"
    @cancel="close"
    @ok="handleOk">
    <a-form-model ref="ruleForm" :model="form" :rules="rules">
      <a-form-model-item label="流程名称" prop="workflowName">
        <a-input v-model="form.workflowName" placeholder="请输入流程名称"></a-input>
      </a-form-model-item>
      <a-form-model-item label="适用范围" prop="departs">
        <a-tree-select
          allow-clear
          multiple
          tree-default-expand-all
          treeCheckable
          treeCheckStrictly
          placeholder="请选择本业务流程适用范围"
          :getPopupContainer="(node) => node.parentNode"
          :dropdownStyle="{maxHeight:'200px',overflow:'auto'}"
          :tree-data="treeData"
          v-model="form.departs">
        </a-tree-select>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
  //新建流程
  import {queryDepartTreeList} from '@/api/api'
  import {postAction} from "../../../api/manage";

  export default {
    name: "FlowModal",
    props: {
      showModal: {
        type: Boolean,
        required: true,
        default: false
      },
      workflowId: {
        type: String
      },
      workflowName: {
        type: String
      },
      checkedDepartIds: {
        type: Array
      }
    },
    data() {
      return {
        form: {
          workflowName: '',
          departs: []
        },
        treeData: [],
        rules: {
          workflowName: [
            {required: true, message: '请输入流程名称', trigger: 'blur'},
          ],
          departs: [
            {required: true, message: '请选择适用范围', trigger: ['change']},
          ],
        }
      }
    },
    created() {
      this.queryDepartTree();
      if (this.workflowId) {
        this.form.workflowName = this.workflowName;
      }
    },
    methods: {
      //查询部门数据
      queryDepartTree() {
        queryDepartTreeList().then((res) => {
          if (res.success) {
            this.treeData = res.result;
            this.handleCheckedDeparts(res.result)
          }
        })
      },
      handleCheckedDeparts(treeData) {
        if (!this.workflowId) {
          this.form.departs = [];
          return;
        }
        if (this.checkedDepartIds && Array.isArray(this.checkedDepartIds)) {
          const depart = [];
          this.handleTreeData(treeData, this.checkedDepartIds, depart);
          this.form.departs = depart;
        }
      },
      //递归处理tree数据结构
      handleTreeData(treeData, src, dst) {
        for (let i = 0; i < treeData.length; i++) {
          const item = treeData[i];
          if (src.includes(item.value)) {
            dst.push({
              label: item.departName,
              value: item.value
            });
          }
          if (dst.length === src.length) {
            break;
          }
          if (item.children && item.children.length > 0) {
            this.handleTreeData(item.children, src, dst);
          }
        }
      },
      close() {
        this.$emit('update:showModal', false);
      },
      handleOk() {
        //校验表单
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            //提交表单
            const depart = [];
            this.form.departs.forEach(item => {
              depart.push(item.value)
            });
            this.form.assignList = depart;
            if (this.workflowId) {
              this.form.workflowId = this.workflowId;
            }
            console.log('表单数据', this.form);
            postAction('sys/workflow/addWorkFlowBase', this.form).then(res => {
              if (res.success) {
                this.$emit('refresh');
                this.close();
              } else {
                this.$message.error(res.message);
              }
            }).catch(error => {
              console.log(error)
            });
          } else {
            return false;
          }
        });
      }
    }
  }
</script>

<style scoped>

</style>